<template>
    <el-input :maxlength="wifiNameMaxLength" v-model="inValue" v-on="$listeners" v-bind="$attrs">
        <div slot="append">{{ append }}</div>
    </el-input>
</template>

<script>
import { getByteLength } from '@/utils/common';

export default {
    name: 'WiFiNameInput',
    props: {
        value: [String]
    },
    data() {
        return {
            wifiNameMaxLength: 32,
            wifiNameCurrentLength: 0
        };
    },
    computed: {
        inValue: {
            get: function () {
                return this.value;
            },
            set: function (newValue) {
                this.$emit('input', newValue);
            }
        },

        append() {
            return `${this.wifiNameCurrentLength}/32`;
        }
    },
    watch: {
        inValue: {
            handler: function (nVal) {
                this.wifiNameCurrentLength = nVal ? getByteLength(nVal) : 0;
                this.wifiNameMaxLength = this.wifiNameCurrentLength >= 32 ? nVal.length : 32;
            },
            immediate: true
        }
    }
};
</script>

<style lang="less" scoped></style>
